<!DOCTYPE html>
<html>
    <head>
        <title>Renascer Planejados</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" href="recursos/css/coin-slider-styles.css"/>
        <link rel="stylesheet" type="text/css" href="recursos/css/estilo.css"/>
        <link rel="stylesheet" href="recursos/scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
        <script type="text/javascript" src="recursos/scripts/jquery-1.4.min.js"></script>
        <script type="text/javascript" src="recursos/scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <script type="text/javascript" src="recursos/scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
        <script type="text/javascript" src="recursos/scripts/suporte.js"></script>
        <script type="text/javascript" src="recursos/scripts/coin-slider.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                
                $('#loading').hide();
                $('#marcenaria').hide();
                $('#marmoraria').hide();
                $('#mm').hide();
                
                var y = $('.fundo').css('height').replace(/px/g, '');
                y = parseInt(y, 10) + 52;
                $('#publicidade').css('height', y);
            });
            
            var menuItemSelected = null;
            
            function mostrarSubMenu(menu, id){
                if(menuItemSelected !== null){
                    menuItemSelected.className = 'gradiente_preto showroom_menu_item';   
                }
                if(subMenuItemSelecionado !== null){
                    subMenuItemSelecionado.className = 'gradiente_preto showroom_menu_item';   
                }
                menuItemSelected = menu;
                menuItemSelected.className = 'showroom_menu_item_selected';
                if(id === 'marcenaria'){
                    $('#selecione').hide('fast', function(){
                        $('#marmoraria').hide('fast', function(){
                            $('#mm').hide('fast', function(){
                                $('#marcenaria').show('fast')
                            }); 
                        }); 
                    });  
                }else if(id === 'marmoraria'){
                    $('#selecione').hide('fast', function(){
                        $('#marcenaria').hide('fast', function(){
                            $('#mm').hide('fast', function(){    
                                $('#marmoraria').show('fast');
                            });
                        });
                    });
                }else{
                    $('#selecione').hide('fast', function(){
                        $('#marcenaria').hide('fast', function(){
                            $('#marmoraria').hide('fast', function(){
                                $('#mm').show('fast');
                                mostrarConteudoSubMenu(null, 'juntos', 18)
                            });
                        });
                    });
                }
                $('#fotos').html('Selecione uma categoria.');
                $('#qt_fotos').html('0 / 0');
            }
            
            var subMenuItemSelecionado = null;
            var quantidadeTotalFotos = 0;
            var paginaAtual = null;
            var totalPaginas = 0;
            var tipoFotoAtual = null;
            
            var colunas = 5;
            var linhas = 3;
            var dimensao = colunas * linhas;
            
            function mostrarConteudoSubMenu(menu, id, qt){
            
                if(subMenuItemSelecionado !== null){
                    subMenuItemSelecionado.className = 'gradiente_preto showroom_menu_item';   
                }
                
                if(menu !== null){
                    subMenuItemSelecionado = menu;
                    subMenuItemSelecionado.className = 'showroom_menu_item_selected';
                }
               
                quantidadeTotalFotos = qt;
                paginaAtual = 1;
                tipoFotoAtual = id;
                totalPaginas = Math.ceil(quantidadeTotalFotos/dimensao);
                exibirFotos();
            }
            
            var qtFotos = 0;
            function exibirFotos(){
                var html = [];
                var i = 0;
                var aux = ((paginaAtual * dimensao) - dimensao) + 1;
                for(var x = 0; x < linhas; x++){
                    html[i++] = '<tr>';
                    for(var c = 0; c < colunas; c++){
                        if(aux <= quantidadeTotalFotos){
                            qtFotos++;
                            html[i++] = '<td>';
                            html[i++] = '<a rel="grupo" href="recursos/showroom/' + tipoFotoAtual +'' + aux +'.jpg"><img onload="load()" class="imagem" src="recursos/showroom/' + tipoFotoAtual +'' + aux +'_small.jpg"/></a>';
                            html[i++] = '</td>';
                        }else{
                            break;
                        }
                        aux++;
                    }    
                    html[i++] = '</tr>';
                    if((aux + 1) > quantidadeTotalFotos){
                        break;
                    }
                }
                
                $('#qt_fotos').html(paginaAtual + ' / ' + totalPaginas);
                $('#loading').show();
                $('#fotos').hide('fast', function(){
                    $('#fotos').html(html.join(''));
                });
                $('#fotos').show('fast',function(){
                    $('a[rel=grupo]').fancybox();
                });
            }
            
            function moverEsquerda(){
                if((paginaAtual - 1) >= 1){
                    paginaAtual--;
                    exibirFotos();
                }
            }
            
            function moverDireita(){
                if((paginaAtual + 1) <= totalPaginas){
                    paginaAtual++;
                    exibirFotos();
                }
            }
            
            var carregada = 0;
            function load(){
                carregada++;
                if(carregada === qtFotos){
                    var imgs = [];
                    imgs = $("#fotos img");
                    setTimeout(function(){
                        $('#loading').hide();
                        for(var c = 0; c < imgs.length; c++){
                            imgs[c].style.display = "block";
                        }
                    }, 1000);
                }
            }
         
        </script>
    </head>
    <body>
        <div class="banner">
            <div class="base">
                <div class="marcenaria_marmoraria">
                    <h4 class="telefone">(13) 1111-1111     |     12*123</h4>
                </div>
                <div class="logo_banner">
                    <img  title="Renascer Planejados" src="recursos/imagens/logo.png"/>
                    <h3>A solução para seu projeto</h3>
                </div>
            </div>
        </div>
        <div class="gradiente_vermelho divisoria_menu"></div>
        <div class="menu_fundo">
            <div class="icone_selecionado">
                <a href="index.html">
                    <div class="icone icon_home"></div>
                </a>
            </div>
            <div class="icone_selecionado">
                <a href="showroom.html">
                    <div class="icone icon_show_room"></div>
                </a>
            </div>
            <div class="icone_selecionado">
                <a href="orcamento.html">
                    <div class="icone icon_orcamento"></div>
                </a>
            </div>
            <div class="icone_selecionado">
                <a href="quemsomos.html">
                    <div class="icone icon_quem_somos"></div>
                </a>
            </div>
            <div class="icone_selecionado">
                <a href="faleconosco.html">
                    <div class="icone icon_fale_conosco"></div>
                </a>
            </div>
        </div>
        <div class="gradiente_vermelho_escuro divisoria_menu"></div>
        <div style="display: table; width: 100%">
            <div class="fundo">
                <div class="titulo gradiente_vermelho">
                    <div class="titulo_texto">SHOW ROOM</div>
                </div>
                <div class="showroom_base">
                    <table class="sub_menu" cellspacing="0">
                        <tbody>
                            <tr class="showroom_menu">
                                <td onclick="mostrarSubMenu(this, 'marcenaria')" style="width: 33%" class="gradiente_preto showroom_menu_item">Marcenaria</td>
                                <td onclick="mostrarSubMenu(this, 'mm')" style="font-size: 16px; width: 34%" class="gradiente_preto showroom_menu_item">Marcenaria &<br/>Marmoraria</td>
                                <td onclick="mostrarSubMenu(this, 'marmoraria')" style="width: 33%" class="gradiente_preto showroom_menu_item">Marmoraria</td>
                            </tr>
                        </tbody>
                    </table>
                    <div style="height: 25px">
                        <table class="sub_menu" id="marcenaria" cellspacing="0">
                            <tbody>
                                <tr class="showroom_sub_menu">
                                    <td onclick="mostrarConteudoSubMenu(this, 'marcenaria_cozinha', 7)" style="width: 20%" class="gradiente_preto showroom_menu_item">Cozinha</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marcenaria_banheiro', 20)"  style="width: 20%" class="gradiente_preto showroom_menu_item">Banheiro</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marcenaria_dormitorio', 9)"  style="width: 20%" class="gradiente_preto showroom_menu_item">Quarto</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marcenaria_escritorio', 22)"  style="width: 20%" class="gradiente_preto showroom_menu_item">Escritório</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marcenaria_sala', 7)"  style="width: 20%" class="gradiente_preto showroom_menu_item">Sala</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="sub_menu" id="marmoraria" cellspacing="0">
                            <tbody>
                                <tr class="showroom_sub_menu">
                                    <td onclick="mostrarConteudoSubMenu(this, 'marmoraria_')"  style="width: 20%" class="gradiente_preto showroom_menu_item">Cozinha</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marmoraria_')"  style="width: 20%" class="gradiente_preto showroom_menu_item">Banheiro</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marmoraria_')"  style="width: 20%" class="gradiente_preto showroom_menu_item">Soleira</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marmoraria_')"  style="width: 20%" class="gradiente_preto showroom_menu_item">Granito</td>
                                    <td onclick="mostrarConteudoSubMenu(this, 'marmoraria_')"  style="width: 20%" class="gradiente_preto showroom_menu_item">Mármore</td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="sub_menu" id="selecione" cellspacing="0">
                            <tbody>
                                <tr class="showroom_sub_menu">
                                    <td class="gradiente_preto" style="width: 100%"></td>
                                </tr>
                            </tbody>
                        </table>
                        <table class="sub_menu" id="mm" cellspacing="0">
                            <tbody>
                                <tr class="showroom_sub_menu">
                                    <td class="showroom_menu_item_selected">Todas</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <table cellspacing="0" style="width: 100%; height: 300px">
                        <tbody>
                            <tr>
                                <td style="padding: 0;">
                                    <div id="esquerda" onclick="moverEsquerda()" class="show_room_esquerdo"></div>
                                </td>
                                <td style="width: 100%;">
                                    <div id="loading" style="text-align: center;">
                                        <img src="recursos/imagens/loading.gif"/><br/>
                                    </div>
                                    <table style="text-align: center; padding: 20px; width: 100%;">
                                        <tbody id="fotos">
                                            <tr><td>Selecione um tipo de serviço.</td></tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="padding: 0">
                                    <div onclick="moverDireita()" class="show_room_direito"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="gradiente_preto quantidade_fotos">
                        <label id="qt_fotos">0 / 0</label>
                    </div>
                </div>
            </div>
            <div id="publicidade" style="float: right; width: 19.5%; background: url(recursos/imagens/body_fundo.jpg) repeat;">
                <div class="gradiente_vermelho titulo_publicidade">PUBLICIDADE</div>
                <div style="padding: 5px">
                    <img style="width: 100%" border="1" src="http://googleads.g.doubleclick.net/pagead/imgad?id=CPCOu6-6yf-19wEQ0AIYmAIyCA5z75wxzN3F"/>
                    <img style="width: 100%" border="1" src="http://googleads.g.doubleclick.net/pagead/imgad?id=CPCOu6-6yf-19wEQ0AIYmAIyCA5z75wxzN3F"/>
                </div>
            </div>
        </div>
        <div class="gradiente_vermelho_escuro divisoria_menu"></div>
        <div class="rodape_fundo">
            <div class="base_rodape">
                <div>© Renascer Planejados - Todos os Direitos Reservados</div><br/>
                <div class="desenvolvido">Desenvolvido por <a href="http://www.rradesenvolvimento.com" target="_blank">RRA</a></div>
                <div class="logo_rodape">
                    <img class="img_logo_rodape" src="recursos/imagens/logo.png" title="Renascer Planejados"/>
                </div>
                <div class="shopping_rodape">
                    <a href="http://www.litoralplazashopping.com.br" target="_blank" title="Litoral Plaza Shopping">
                        <img src="recursos/imagens/shopping_logo.png"/>
                    </a>
                </div>
                <a href="http://maps.google.com.br/maps/place?ftid=0x94ce1c53d4bbfe33:0x7d7bac900e93689d&q=Av.+Ayrton+Senna+da+Silva,+1.511+-+Praia+Grande+-+SP&hl=pt-BR&ved=0CA0Q-gswAA&sa=X&ei=2baoTuXSEIfqygW50ZXrAg" target="_blank"><h2 class="endereco">Av. Ayrton Senna da Silva, 1.511 - Lojas 9 e 10 - Praia Grande - SP</h2></a>
            </div>
        </div>
    </body>
</html>
